<template>
  <div class="login">
    <div class="login-box" :style="{ 'background-size': type == '1' ? '100% 80%' : '' }">
      <h1>疫情大数据展示系统</h1>
      <div class="box-card" v-if="type == '0'">
        <el-form ref="formRef" :model="form" :rules="rules">
          <p>用&nbsp;户&nbsp;登&nbsp;录</p>
          <el-form-item prop="phone">
            <el-input placeholder="请输入你的手机号" v-model="form.phone" prefix-icon="el-icon-user" class="item"></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input placeholder="请输入你的密码" v-model="form.pwd" prefix-icon="el-icon-unlock" type="password"
              class="item"></el-input>
          </el-form-item>
          <el-button type="primary" class="login-btn" @click="goTo">登 录</el-button>
        </el-form>
        <div class="register" @click="gotoRegister">去注册</div>
      </div>
      <div class="box-card" v-if="type == '1'">
        <el-form ref="registerFormRef" :model="registerForm" :rules="registeRules">
          <p>用&nbsp;户&nbsp;注&nbsp;册</p>
          <el-form-item prop="username">
            <el-input placeholder="请输入你的用户名" v-model="registerForm.username" prefix-icon="el-icon-user"
              class="item"></el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input placeholder="请输入你的手机号" v-model="registerForm.phone" prefix-icon="el-icon-user"
              class="item"></el-input>
          </el-form-item>
          <el-form-item prop="sex">
            <el-select v-model="registerForm.sex" placeholder="请选择性别" style="width:100%">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="sex">
            <selectAddress v-model="registerForm.address" :form="registerForm.address" ref="address"></selectAddress>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input placeholder="请输入你的密码" v-model="registerForm.pwd" prefix-icon="el-icon-unlock" type="password"
              class="item"></el-input>
          </el-form-item>
          <el-button type="primary" class="login-btn" @click="registerClick">注 册</el-button>
        </el-form>
        <div class="register" @click="gotoLogin">去登录</div>
      </div>
    </div>
  </div>
</template>

<script >
import { login, registerUser } from '@/api/login'
import { setItem, getItem } from '@/utils/auth.js'
import selectAddress from '../components/selectAddress/index.vue'
export default {
  components: {
    selectAddress
  },
  name: 'Home',
  data() {
    return {
      type: '0',
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
            message: '请输入正确的手机号码'
          }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '密码位数只能在6~15之间', trigger: 'blur' }
        ]
      },
      registeRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
            message: '请输入正确的手机号码'
          }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '密码位数只能在6~15之间', trigger: 'blur' }
        ],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }]

      },
      registerForm: {
        username: '',
        phone: '',
        sex: '0',
        pwd: '',
        address: {
          // 省
          province: "",
          // 市
          city: "",
          // 区
          district: "",
        },
      },
      form: {
        phone: '',
        pwd: ''
      }
    }
  },
  mounted() {
    console.log(' process.env.VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
  },
  methods: {
    goTo() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) {
          return false
        }
        let data = {
          phone: this.form.phone,
          password: this.form.pwd
        }
        login(data).then(res => {
          if (res.code == 200) {
            setItem('Token', res.token)
            setItem('userinfo', res.data)
            this.$message({
              showClose: true,
              message: '登录成功',
              type: 'success'
            });
            localStorage.setItem('noHint', '0')
            setTimeout(() => {
              this.$router.push({ path: '/home' })
            }, 1000)
          }
        })
      })
    },
    registerClick() {
      console.log("this.registerForm", this.registerForm.address);
      this.$refs.registerFormRef.validate(async valid => {
        if (!valid) {
          return false
        }
        if (this.registerForm.address.district != '') {

          let data = {
            username: this.registerForm.username,
            phone: this.registerForm.phone,
            sex: this.registerForm.sex,
            password: this.registerForm.pwd,
            // 省
            province: this.registerForm.address.province,
            // 市
            city: this.registerForm.address.city,
            // 区
            district: this.registerForm.address.district,
            // 完整code
            code: this.registerForm.address.province + this.registerForm.address.city + this.registerForm.address.district
          }
          registerUser(data).then(res => {
            console.log("res", res);
            if (res.code == 200) {
              setItem('Token', res.token)
              setItem('userinfo', res.data)
              this.type = '0'
              this.$message({
                showClose: true,
                message: '注册成功',
                type: 'success'
              });
            }
          })
        } else {
          this.$message({
            showClose: true,
            message: '请填选城市',
            type: 'error'
          });
        }
      })

    },
    gotoRegister() {
      this.type = '1'
    },
    gotoLogin() {
      this.type = '0'
    }
  }
}
</script>

<style lang="less">
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../assets/img/img-loginbg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  // font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  //  background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%);
  .login-box {
    width: 600px;
    height: 680px;
    // border: 1px solid blue;
    background-image: url('../assets/img/img-login-border.png');
    background-repeat: no-repeat;
    background-position: 0px 60px;
    // background-size: 100% 80%;
  }

  .register {
    cursor: pointer;
    margin-top: 10px;
  }

  h1 {
    width: 400px;
    height: 40px;
    font-size: 39px;
    font-family: Adobe Heiti Std;
    font-weight: bold;
    color: rgba(207, 212, 222, 0);
    line-height: 40px;
    text-align: center;
    // border: 1px solid red;
    background: linear-gradient(0deg, #4ac6d8 0%, #d2def9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 auto;
  }

  .box-card {
    width: 350px;
    // height: 260px;
    padding: 20px 10px;
    margin: 0 auto;
    margin-top: 15%;
    background: none;

    p {
      text-align: center !important;
      width: 158px;
      margin-bottom: 10px !important;
      margin: auto;
      height: 40px;
      font-size: 24px !important;
      font-family: 58;
      color: #ffffff;
      line-height: 24px;
    }

    .el-form-item {
      height: 40px;
      margin-bottom: 20px;
    }

    // .item {
    //   border: none;
    //   margin-bottom: 20px;
    //   font-size: 18px;
    //   padding-left: 2px;
    // }
    .item ::-webkit-input-placeholder {
      color: #848c9e !important;
      font-size: 18px !important;
    }

    p {
      text-align: center;
      margin-top: -16px;
      font-size: 12px;
    }

    .el-checkbox {
      --el-checkbox-background-color: #0f244e;
      --el-checkbox-input-border: 1px solid #0f244e;
      color: #cfd4de;
      --el-checkbox-checked-background-color: none;
      --el-checkbox-checked-font-color: #cfd4de;
    }

    .login-btn {
      width: 100%;
      background: #109bff;
      margin-top: 13px;
      border-radius: 0;
      color: #cfd4de;
    }
  }

  .top-bar {
    width: 100%;
    height: 100px;
    position: absolute;
    right: 5px;
    top: 0;
    -webkit-app-region: drag;

    .title-btn {
      float: right;
      margin: 15px;
      -webkit-app-region: no-drag;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

.el-input,
.el-input__inner {
  --el-input-background-color: #262c60 !important;
  background-color: #262c60 !important;
  --el-input-border: 1px solid #262c60 !important;
  --el-input-border-radius: none !important;
  --el-input-font-color: #fff !important;
  color: #fff !important;
  --el-input-hover-border: #262c60 !important;
  border-color: #262c60 !important;
  --el-color-danger: #262c60 !important;
}
</style>
